import Taro, { Component } from '@tarojs/taro'
import { View} from '@tarojs/components'
import { AtActionSheet, AtIcon } from 'taro-ui'
import './dLinearLayout.scss'

export class Param extends Component {
  state = {
    openAtAction: false,
  }
  componentDidMount () { 
  }

  handleShowAtAction(){
    this.setState({
      openAtAction:true
    });
  }

  handleCloseAtAction(){
    this.setState({
      openAtAction:false
    });
  
  }

  render () {
    const { openAtAction } = this.state;
    return (
      <View className='atAction-content'>
          <View className='dLinearLayout' onClick={() =>this.handleShowAtAction()}>
            <View className='dLinearLayout-left'>参数</View>
            <View  className='dLinearLayout-center'>
              <View className='dLinearLayout-content'>
                <View className='black'>生成日期 包装方式...</View>
              </View>
            </View>
            <View className='dLinearLayout-right'>
              <AtIcon value='chevron-right' size='16' color='#8d8d8d'></AtIcon>
            </View>
          </View>

          <AtActionSheet isOpened={openAtAction}>
            <View className='at-title'>产品参数</View>
            <View className='at-content'>
              <View className='param-item'>
                <View className='param-item-name'>品牌</View>
                <View className='param-item-value'>other/其他</View>
              </View>
              <View className='param-item'>
                <View className='param-item-name'>鞋跟高</View>
                <View className='param-item-value'>低跟(1-3cm)</View>
              </View>
              <View className='param-item' style={{border:'none'}}>
                <View className='param-item-name'>鞋头款式</View>
                <View className='param-item-value'>尖头</View>
              </View>
            </View>
            <View className='at-button'>
              <View className='button' onClick={() => this.handleCloseAtAction()}>完成</View>
            </View>
          </AtActionSheet>
        </View>
    )
  }
}